﻿<html>
<head>
    <title>
    </title>
    <meta name="viewport" content="" width="device-width">
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.0.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.0.min.js"></script>
    <link rel="stylesheet" href="css/frame.css">
    <link rel="stylesheet" href="css/bar.css">
	
    <script src="lib/center.js"></script>
    <script src="lib/player.js"></script>
    <script src="lib/SubtitleBar.js"></script>

    <script type="text/javascript" src="lib/SubTitleDecoder.js"></script>
    <script type="text/javascript" src="lib/SrtSubTitleDecoder.js"></script>
    <script type="text/javascript" src="lib/SsaSubTitleDecoder.js"></script>
    <script type="text/javascript" src="lib/DecoderFactory.js"></script>
	<!--
    <script type="text/javascript" src="js/videosub-0.9.9.js"></script>
	-->
	
    <script type="text/javascript">

        //  global
        var videoCenter = new VideoCenter();
        var videoPlayer = new XVideoPlayer();/*VideoJSPlayer();*/
        var subTitleBar = new SubTitleBar();
        var decoderFactor = new DecoderFactory();
        var subTitleDecoder = null;

        //  main
        window.onload = function () {

            subTitleBar.init("subtitles");

            videoPlayer.init("video", onVideoTimeUpdate);
            videoCenter.init(videoPlayer,subTitleBar);
			
			//loadSubtitleFromUrl(jso.getTrackUrl());
			videoPlayer.loadVideo(jso.getVideoUrl());
			loadSubtitle(jso.getTrackString());
			
            videoPlayer.setVolume(100);
            videoPlayer.play();
        };

        //  triggered when video time changed
        //  call the timeUpdate() method of videoPlayer to notify other module
        function onVideoTimeUpdate() {
            videoCenter.onSubTitleChanged(videoPlayer.video.currentTime);
        }

        //  triggered when the user clicked on the list of SubTitleBar
        function onSubTitleBarClicked(time) {
            subTitleBar.onItemClick(time);
        }

        function loadVideo(url) {
			//var video = document.getElementById("video");
			//video.innerHTML = "<source src=\"" + url + "\" type=\"video/mp4\" />";//+
			//"<track src=\"" + track + "\" kind=\"subtitle\" srclang=\"en-US\" label=\"English\" />";
        }

        function pause() {
            videoPlayer.pause();
        }
		
		function loadSubtitleFromUrl(srtUrl) {
            var decoderFactory = new DecoderFactory();
            subTitleDecoder = decoderFactory.createDecoderByType("srt");
			var strack = jso.urlDownloadToString(srtUrl);
            var array = subTitleDecoder.decodeString(strack);
            subTitleBar.display(array);
        }
		
		function loadSubtitle(track){
			var decoderFactory = new DecoderFactory();
            subTitleDecoder = decoderFactory.createDecoderByType("srt");
			var array = subTitleDecoder.decodeString(track);
			jso.logd("array len ",array.length + "");
            subTitleBar.display(array);
		}

    </script>

</head>
<body>

    <div class="player-frame">
        <div class="video-frame" id="frame">
            <video id="video" width="100%"
                   controls="controls">			
				<!--<source src="http://222.197.179.3:8087/jellies.mp4" type="video/mp4" />-->
				<!--<track src="http://10.50.1.4/test.srt" kind="subtitle" srclang="en-US" label="English" />-->
            </video>
        </div>
        <div id="right-bar" >

                <div id="frame-subtitle-list" class="ui-body-d ui-content">
                    <div>
                        <ol class="subtitles" style="overflow:auto" id="subtitles"></ol>
                    </div>
                </div>
                
        </div>
    </div>

</body>
</html>
